<script setup lang="ts">
// 动态列表数据
import type { CircleVO } from '@/types/vo/CircleVO'
import { getCircleListService, getMomentListService } from '@/apis/front/circle'
import type { MomentQuery } from '@/types/query/MomentQuery'
import type { MomentVO } from '@/types/vo/MomentVO'

const moments = ref<MomentVO[]>([])

const circleList = ref<CircleVO[]>([])
const activeCircleId = ref<number>()

const getCircleList = async () => {
  const res = await getCircleListService()
  circleList.value = res.data.data
  activeCircleId.value = circleList.value[0].id
}

const getMomentParams = ref<MomentQuery>({
  pageNum: 1,
  pageSize: 10,
})
const getMomentList = async () => {
  if (noMore.value) {
    return
  }
  try {
    loading.value = true
    getMomentParams.value.circleId = activeCircleId.value
    const res = await getMomentListService(getMomentParams.value)
    moments.value = res.data.data.records
    if (res.data.data.records.length < getMomentParams.value.pageSize!) {
      noMore.value = true
    }
  } finally {
    loading.value = false
  }
}

watch(
  () => activeCircleId.value,
  async () => {
    if (activeCircleId.value) {
      noMore.value = false
      getMomentParams.value.pageNum = 1
      await getMomentList()
    }
  },
)

// 初始化数据
onMounted(async () => {
  await getCircleList()
})

const loading = ref(false)
const noMore = ref(false)

const handleLoad = async () => {
  if(noMore.value || loading.value){
    return
  }
  getMomentParams.value.pageNum = getMomentParams.value.pageNum
    ? getMomentParams.value.pageNum + 1
    : 1
  await getMomentList()
}
</script>

<template>
  <div class="flex w-full h-full gap-20px">
    <div
      class="left pt-6px h-full w-200px bg-white rounded-2 flex flex-col overflow-auto items-center"
    >
      <CircleItem
        v-for="(item, index) in circleList"
        :circle-info="item"
        :index="index"
        :callback="
          circle => {
            activeCircleId = circle.id
          }
        "
        :active-id="activeCircleId"
        :key="item.id"
      />
    </div>
    <n-infinite-scroll
      class="flex-1 h-full"
      @load="handleLoad"
      :distance="10"
      v-if="!loading"
    >
      <div>
        <post-publisher
          class="w-full"
          :circle-id="activeCircleId"
          @publish="
            () => {
              noMore = false
              getMomentParams.pageNum = 1
              getMomentList()
            }
          "
        />
        <div class="flex flex-col gap-10px">
          <DynamicItem
            v-for="item in moments"
            :moment="item"
            :key="item.id"
            class="w-full"
          />
        </div>
        <div class="flex justify-center w-full bg-white">
          <div v-if="loading" class="text">加载中...</div>
          <div v-if="noMore" class="text">没有更多了 🤪</div>
        </div>
      </div>
    </n-infinite-scroll>
    <div v-else class="flex-1 bg-white px-24px pt-24px pb-6px overflow-y-auto">
      <n-skeleton text :repeat="20" />
    </div>
    <div class="flex-col flex gap-10px">
      <UserCard class="w-250px" />
      <RecommendCard class="w-250px" />
    </div>
  </div>
</template>

<style scoped></style>
